<script lang="tsx">
/**
 * 登录
 */
export default {
  name: "login"
}
</script>

<script lang="tsx" setup>
import {nextTick, ref} from "vue"
import {useRouter} from "vue-router"
import {ElMessage} from "element-plus"
import {processRequest, token, VerificationCode} from "anqin-framework"
import {FRAME_APIS} from "@/frame/apis"

/**
 * 定义router
 */
const router = useRouter()

/**
 * 验证码组件
 */
const verificationCodeRef = ref()

/**
 * 账号、密码
 */
const account = ref("admin")
const password = ref("123")
const code = ref()
const handleClick = async () => {
  if (account.value == null) {
    ElMessage.error("账号不可为空!")
    return false
  }
  if (password.value == null) {
    ElMessage.error("密码不可为空!")
    return false
  }
  if (code.value == null) {
    ElMessage.error("验证码不可为空!")
    return false
  }
  const verificationCode = verificationCodeRef.value.getValue()
  if (verificationCode !== code.value) {
    code.value = ""
    ElMessage.error("验证码不正确!")
    await verificationCodeRef.value.handleRefresh()
    return false
  }
  const result = await processRequest.post(FRAME_APIS.LOGIN_BASE,
      {
        account: account.value,
        password: password.value
      })
  token.set(result)
  await router.push({path: "/code-rule"})
}

/**
 * 切换密码显示方式
 */
const active = ref(false)
const handleShowPassWord = () => {
  active.value = !active.value
}

/**
 * 跳转至网站
 */
const handleWebsite = () => {
  window.open("https://yuyiting.work")
}

/**
 * 跳转至备案
 */
const handleICP = () => {
  window.open("https://beian.miit.gov.cn")
}

/**
 * 自动设置验证码
 */
nextTick(() => {
  code.value = verificationCodeRef.value.getValue()
})
</script>

<template>
  <div class="page-wrap">
    <div class="page-icon">
      <!--      <img src="" alt=""/>-->
    </div>
    <div class="page-container">
      <div class="container-header">
        <!--        <img class="header-img" alt=""/>-->
        <div class="header-title">
          博客
        </div>
      </div>
      <div class="container-title">
        账号登录
      </div>
      <div class="container-form">
        <div class="form-item">
          <img class="item-img" src="/img/frame/login/login-user.svg" alt=""/>
          <el-input v-model="account" placeholder="用户名 / 邮箱" type="text" clearable/>
        </div>
        <div class="form-item">
          <img class="item-img" src="/img/frame/login/login-lock.svg" alt=""/>
          <el-input v-model="password" placeholder="密码" clearable :type="active ? 'password' : 'text'"/>
          <img class="item-img" @click="handleShowPassWord"
               :src="active ? '/img/frame/login/login-eye-active.svg' : '/img/frame/login/login-eye-close.svg'  "
               alt=""/>
        </div>
        <div class="form-code">
          <div class="form-item">
            <img class="item-img" src="/img/frame/login/login-test.svg" alt=""/>
            <el-input v-model="code" type="text" placeholder="验证码"/>
          </div>
          <div class="form-code-logout">
            <VerificationCode ref="verificationCodeRef" :height="37"/>
          </div>
        </div>
      </div>
      <div class="container-login">
        <el-button type="primary" @click="handleClick">登录</el-button>
      </div>
    </div>
    <div class="page-footer">
      <div class="footer-copyright" @click="handleWebsite">
        Copyright© 2024-2025 yuyiting.work 版权所有
      </div>
      <div class="footer-ICP" @click="handleICP">
        浙ICP备2024088835号-1
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">
</style>